/*
* @Author: yanyanru
* @Date: 2018/5/10
* @Last Modified by: yanyanru
* @Last Modified time: 2018/5/10
* @description: management team
*/
<template>
    <div class="custom-box p-20">
      <div class="custom-title">
          <h3>高管团队( {{listTotalCount}} )</h3>
          <div class="pull-left m-l-20">
              <button type="button" class="custom-btn custom-btn-round" @click="addManage"><i class="fa fa-plus"></i></button>
          </div>
      </div>
      <el-table   
        stripe
        :data="pageList"
        style="width:100%"
        class="m-t-20">
        <el-table-column
            align="center"
            label="序号">
            <template slot-scope="scope">
                {{scope.row.displayOrder}}
            </template>
        </el-table-column>
        <el-table-column
            prop="personName"
            align="center"
            label="姓名">
        </el-table-column>
        <el-table-column
            prop="title"
            align="center"
            label="职务">
        </el-table-column>
        <el-table-column
            prop="level"
            align="center"
            label="级别">
            <template slot-scope="scope">
                {{scope.row.level | getNameById('personTeamLevel')}}
            </template>
        </el-table-column>
        <el-table-column
            prop="entryTime"
            align="center"
            label="入职日期">
            <template slot-scope="scope">
                {{scope.row.entryTime | cmsMoment}}
            </template>
        </el-table-column>
         <el-table-column
            prop="dimissionTime"
            align="center"
            label="离职日期">
            <template slot-scope="scope">
                {{scope.row.dimissionTime | cmsMoment}}
            </template>
        </el-table-column>
         <el-table-column
            prop="dimissionType"
            align="center"
            label="是否离职">
            <template slot-scope="scope">
                {{scope.row.dimissionType | getNameById('whether')}}
            </template>
        </el-table-column>
        <el-table-column
            align="center"
            label="操作">
            <template slot-scope="scope">
                <el-button type="text" @click="goEdit(scope.row)">编辑</el-button>
                <el-button type="text" @click="goDelete(scope.row.id)">删除</el-button>
                <el-button type="text" v-if="scope.row.status !== 1" @click="related(scope.row)">关联</el-button>
                <el-button type="text" v-else  @click="related(scope.row)">取消关联</el-button>    
                <el-button type="text" @click="sortOrder(scope.row)">排序</el-button>
            </template>
        </el-table-column>
    </el-table>
    <div class="m-t-20">
        <el-pagination @current-change="handleCurrentChange"
            :current-page="listPageIndex"
            :total="listTotalCount" :page-size="listPageSize"
            layout="prev, pager, next">
        </el-pagination>
    </div>
    <el-dialog  :visible.sync="sortDialogFlag" style="width:60%;margin:0 auto">
        <el-form style="width:80%;margin:0 auto">
            <el-form-item label="位置：" label-width="60px">
                <el-input v-model="comManager.displayOrder" type="number" style="width:90%;margin:0 auto"></el-input>
            </el-form-item>
            <el-form-item align="center" style="margin:15% auto 0">
                <el-button type="primary" @click="sortCommit()" style="width:43%">是</el-button>
                <el-button type="primary" @click="cancelCommit()" style="width:43%;margin-left:10%;">否</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>
    <el-dialog title="高管团队" :visible.sync="outerVisible">
       <el-form labelWidth="100px">
         <el-row>
           <el-col :span="8">
             <el-form-item label="姓名" required>
               <el-input v-model="personSearch.selectValue"></el-input>
             </el-form-item>
           </el-col>
           <el-col :span="5" class="m-t-3" :offset="1">
             <el-select v-model="personSearch.selectType">
               <el-option v-for="item in personSearchType"
                :key="item.dictValue"
                :value="item.dictValue"
                :label="item.dictName"
               ></el-option>
             </el-select>
           </el-col>
           <el-col :span="3" :offset="1" class="m-t-3">
             <el-button type="primary" @click="searchPerson">搜索</el-button>
           </el-col>
           <el-col :span="4" :offset="1" class="m-t-3">
             <el-button type="primary" @click="addPerson">添加人员</el-button>
           </el-col>
         </el-row>
         <el-row>
           <el-col :span="11">
             <el-form-item label="职务">
                <el-autocomplete
                  class="inline-input"
                  v-model="comManager.title"
                  :fetch-suggestions="querySearch"
                  placeholder="支持模糊搜索"
                  :trigger-on-focus="false"
                  @select="handleSelect"
                  suffix-icon="el-icon-search"
                ></el-autocomplete>
             </el-form-item>
           </el-col>
           <el-col :span="11">
             <el-form-item label="级别">
               <el-select v-model="comManager.level">
                 <el-option v-for="item in personTeamLevel"
                      :key='item.dictValue'
                      :value='item.dictValue-0'
                      :label="item.dictName">
                 </el-option>
               </el-select>
             </el-form-item>
           </el-col>
         </el-row>
         <el-row>
           <el-col :span="11">
             <el-form-item label="是否离职">
               <el-select v-model="comManager.dimissionType">
                 <el-option v-for="item in whether"
                      :key='item.dictValue'
                      :value='item.dictValue-0'
                      :label="item.dictName"
                 ></el-option>
               </el-select>
             </el-form-item>
           </el-col>
         </el-row>
         <el-row>
           <el-col :span="11">
             <el-form-item label="入职时间">
               <el-date-picker
                type="date"
                v-model="comManager.entryTime"
                placeholder="选择日期">
              </el-date-picker>
            </el-form-item>
           </el-col>
           <el-col :span="11" :offset="1">
              <el-form-item label="离职时间">
                <el-date-picker
                  type="date"
                   :disabled="comManager.dimissionType == 2"
                  v-model="comManager.dimissionTime"
                  placeholder="选择日期">
                </el-date-picker>
              </el-form-item>
           </el-col>
         </el-row>
       </el-form>
      <el-dialog
        :visible.sync="innerVisible"
        append-to-body>
        <el-table :data="searchList" @row-click="selectPerson">
          <el-table-column prop="id" label="ID"></el-table-column>
          <el-table-column prop="cnName" label="中文名/英文名"></el-table-column>
          <el-table-column prop="fullName" label="企业名称"></el-table-column>
          <el-table-column prop="title" label="职位"></el-table-column>
          <el-table-column prop="entryTime" label="入职日期"></el-table-column>
        </el-table>
        <el-pagination
          layout="prev, pager, next"
          :total="searchTotalCount">
        </el-pagination>
      </el-dialog>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="saveManageTeam" round>保存</el-button>
        <el-button @click="outerVisible = false" round>取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script lang="ts">
import Vue from 'vue';
import { Component, Prop } from 'vue-property-decorator';
import CommonService from '../../service/common/index';
import { ManageSearch, } from '../../service/common/interface';
import { ComManagerDto, } from '../../api/Interface';
import { SearchDto, } from '../../service/subject/person/personInterface';
import { PersonSearchDto } from '../../service/common/interface';
// import { getCascaderData, } from '../../libs/utils';
@Component
export default class Tag extends Vue {
    @Prop()
    public type: number;
    @Prop()
    public itemId: number; // 业务id
    @Prop()
    public itemType: number; // 类型 
    // 初始化数据
    public personSearch: PersonSearchDto = {} as PersonSearchDto; // <PersonSearchDto>
    public whether: object[] = this.$store.state.user.dictionary.dicList.whether; // 级别
    public personTeamLevel: object[] = this.$store.state.user.dictionary.dicList.personTeamLevel; // 级别
    public openSearchNameType: object[] = this.$store.state.user.dictionary.dicList.openSearchNameType; // 搜索
    public personSearchType: object[] = this.$store.state.user.dictionary.dicList.personSearchType; 
    public comManager: ComManagerDto = {} as ComManagerDto; // 添加的 dto
    public manageSearchParam: ManageSearch = {} as ManageSearch; //初始化搜索条件
    public pageList: object[] = []; // 列表页list
    public listPageIndex: number = 1; // 列表页index
    public listPageSize: number = 10; // 列表页pageSize
    public listTotalCount: number = 111; //列表页总条数
    public searchList: object[] = []; // 搜索页List
    public searchPageIndex: number = 1; // 搜索页index
    public searchPageSize: number = 10; // 搜索页pageSize
    public searchTotalCount: number = 111; //搜索页总条数
    public outerVisible = false;
    public innerVisible = false;
    public companyOpenSearch: object = {};
    public str: string = '';
    public sortDialogFlag: boolean = false;
    // 声明周期钩子
    public created() {
        this.listPageIndex = 1;
        this.listPageSize = 10;
        this.manageSearchParam.companyId = Number(this.$route.params.itemId);
        this.manageSearchParam.type = this.type;
        this.getManageInfo();
    }
    // public mounted() {
    //     this.getManageInfo();
    // }
    // 方法
    // 列表
    public async getManageInfo() {
        this.manageSearchParam['pageParam.pageIndex'] = this.listPageIndex;
        this.manageSearchParam['pageParam.pageSize'] = this.listPageSize;
        const res = await CommonService.getManageTeam(this.manageSearchParam);
        if (res.resCode === '0') {
            this.pageList = res.data.resultData;
            this.listTotalCount = res.data.totalCount;
        }
    }
    // 模糊搜索职务
    public async querySearch(queryString: string, cb: any) {
        if (queryString.trim().replace(/\s/g, '') !== '') {
            let results: SearchDto[] = [];
            const res = await CommonService.getPersonPosition(queryString);
            if (res.resCode === '0') {
                results = res.data.map(item => {
                    item.value = item.title;
                    item.id = item.id;
                    return {value: item.title, id: item.id, level: item.level};
                });
                cb(results);
            }
        }
    }
    public addManage() {
        this.outerVisible = true;
        this.personSearch = {} as PersonSearchDto;
        this.comManager = {} as ComManagerDto;
    }
    public handleSelect(item: SearchDto) {
        this.comManager.title = item.value;
        this.comManager.titleId = item.id;
        this.comManager.level = item.level;
    }
    // 保存高管团队
    public async saveManageTeam() {
        if (!this.comManager.level) {
            this.$message.warning('级别不能为空!');
            return;
        }
        if (this.comManager.dimissionType === 2) {
            this.comManager.dimissionTime = '';
        }
        this.comManager.businessId = this.itemId; // 业务Id  机构 lp  基金
        this.comManager.businessType = this.itemType; // 2 机构 3基金 4 lp
        this.comManager.companyId = Number(this.$route.params.itemId); // 工商id
        this.comManager.status = 1; // 有关联关系
        if (this.comManager.id) { //修改
            this.update();
        } else { // 保存
            this.save();
        } 
    }
    // 保存
    public async save() {
        this.comManager.displayOrder = this.listTotalCount + 1;
        const res = await CommonService.saveManageTeam(this.comManager);
        if (res.resCode === '0') {
            this.$message.success('添加成功!');
            this.outerVisible = false;
            this.getManageInfo();
        }
    }
    // 修改
    public async update() {
        const res = await CommonService.updateManageTeam(this.comManager);
        if (res.resCode === '0') {
            this.$message.success('修改成功!');
            this.outerVisible = false;
            this.getManageInfo();
        }
    }
    // 点击一行选中一个人
    public selectPerson(row: any) {
        this.personSearch.selectValue = row.cnName;
        this.innerVisible = false;
        this.comManager.personId = row.id;
        this.comManager.personName = row.cnName;
    }
    public goEdit(row: any) {
        // this.saveOrEditId = row.id; // 修改的id
        this.comManager.id = row.id; // 主id 有值 代表修改
        this.outerVisible = true;
        this.personSearch.selectValue = row.personName;  // 回显名字
        this.comManager.title = row.title;
        this.comManager.level = row.level;
        this.comManager.dimissionType = row.dimissionType;
        this.comManager.entryTime = row.entryTime;
        this.comManager.dimissionTime = row.dimissionTime;
        // this.personSearch.selectType = row.businessType; // 回显搜索类型
    }
    public handleCurrentChange(val: number) {
        this.listPageIndex = val;
        this.getManageInfo();
    }
    // 搜索人物
    public async searchPerson() {
        this.personSearch['pageParam.pageIndex'] = 1;
        this.personSearch['pageParam.pageSize'] = 1;
        const res = await CommonService.getPerson(this.personSearch);
        if (res.resCode === '0') {
            this.innerVisible = true;
            this.searchList = res.data.resultData;
            this.searchTotalCount = res.data.totalCount;
        } 
    }
    // 添加人员
    public addPerson() {
        this.$router.push({name: 'person-detail', params: {id: '-1'}});
    }
    // 关联
    public related(row: any) {
        let message: string = '';
        let  status: number = 1;
        if (row.status === 1) {  //有关联关系 需要解除关联
            message = '确定取消关联？';
            status = 2;
        } else { // 没有关联关系 需要关联
            message = '确定信息关联？';
            status = 1;
        }
        this.$confirm(message, '提示', {
            confirmButtonText: '是',
            cancelButtonText: '否',
            type: 'warning'
        }).then(() => {
            this.comManager = row;
             this.comManager.status = status;
            this.update();
        });
    }
    // 排序
    public sortOrder(row: any) {
        this.sortDialogFlag = true;
        this.comManager = row;
    }
    // 排序提交
    public async sortCommit() {
        const res = await CommonService.updateManageTeam(this.comManager);
        if (res.resCode === '0') {
            this.$message.success('排序完成!');
            this.sortDialogFlag = false;
            this.getManageInfo();
        }
    }
    // 取消排序
    public cancelCommit() {
        this.sortDialogFlag = false;
        this.getManageInfo();
    }
    // 删除
    public goDelete(id: number) {
        this.$confirm('确定删除此条信息?', '提示', {
            confirmButtonText: '是',
            cancelButtonText: '否',
            type: 'warning'
        }).then(() => {
            this.del(id);
        });   
       
    }
    public async del(id: number) {
        const { resCode } = await CommonService.deleteManage(id);
        if (resCode === '0') {
            this.$message.success('删除成功!');
            this.getManageInfo();
        }  
    }

}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>

</style>
